interface pointArray {
  [x: string]: any;
  [index: number]: number;
}

export const cubeData: areaArray[] = [
  //[x,y,z,r,g,b,a,u,v]
  //面1
  [
    [0, 0, 0, 1, 0, 0, 1, 0, 0],
    [1, 0, 0, 1, 0, 0, 1, 1, 0],
    [1, 1, 0, 1, 0, 0, 1, 1, 1],
  ],
  [
    [1, 1, 0, 1, 0, 0, 1, 1, 1],
    [0, 1, 0, 1, 0, 0, 1, 0, 1],
    [0, 0, 0, 1, 0, 0, 1, 0, 0],
  ],
  //面二
  [
    [1, 0, 0, 0, 1, 0, 1, 0, 0],
    [1, 0, -1, 0, 1, 0, 1, 1, 0],
    [1, 1, -1, 0, 1, 0, 1, 1, 1],
  ],
  [
    [1, 1, -1, 0, 1, 0, 1, 1, 1],
    [1, 1, 0, 0, 1, 0, 1, 0, 1],
    [1, 0, 0, 0, 1, 0, 1, 0, 0],
  ],
  //面三
  [
    [1, 0, -1, 0, 0, 1, 1, 0, 0],
    [0, 0, -1, 0, 0, 1, 1, 1, 0],
    [0, 1, -1, 0, 0, 1, 1, 1, 1],
  ],
  [
    [0, 1, -1, 0, 0, 1, 1, 1, 1],
    [1, 1, -1, 0, 0, 1, 1, 0, 1],
    [1, 0, -1, 0, 0, 1, 1, 0, 0],
  ],
  //面四
  [
    [0, 0, -1, 1, 0, 0, 1, 0, 0],
    [0, 0, 0, 0, 0, 1, 1, 1, 0],
    [0, 1, 0, 0, 1, 0, 1, 1, 1],
  ],
  [
    [0, 1, 0, 1, 0, 0, 1, 1, 1],
    [0, 1, -1, 0, 1, 0, 1, 0, 1],
    [0, 0, -1, 0, 0, 1, 1, 0, 0],
  ],
  //面五
  [
    [0, 0, 0, 1, 1, 1, 1, 0, 0],
    [1, 0, 0, 1, 1, 1, 1, 1, 0],
    [1, 0, -1, 1, 1, 1, 1, 1, 1],
  ],
  [
    [1, 0, -1, 1, 1, 1, 1, 1, 1],
    [0, 0, -1, 1, 1, 1, 1, 0, 1],
    [0, 0, 0, 1, 1, 1, 1, 0, 0],
  ],
  //面六
  [
    [0, 1, 0, 1, 1, 1, 1, 0, 0],
    [1, 1, 0, 1, 1, 1, 1, 1, 0],
    [1, 1, -1, 1, 1, 1, 1, 1, 1],
  ],

  [
    [1, 1, -1, 1, 1, 1, 1, 1, 1],
    [0, 1, -1, 1, 1, 1, 1, 0, 1],
    [0, 1, 0, 1, 1, 1, 1, 0, 0],
  ],
];
const gSize = 100; //地面大小
const gPos = -10; //地面高度
const rept = 10; //重复次数
export const floorsData: areaArray[] = [
  [
    [-gSize, gPos, -gSize, 0, 0, 1, 1, 1, 1],
    [gSize, gPos, -gSize, rept, 0, 1, 1, 1, 1],
    [gSize, gPos, gSize, rept, rept, 1, 1, 1, 1],
  ],
  [
    [-gSize, gPos, -gSize, 0, 0, 1, 1, 1, 1],
    [gSize, gPos, gSize, rept, rept, 1, 1, 1, 1],
    [-gSize, gPos, gSize, 0, rept, 1, 1, 1, 1],
  ],
];
const position: areaArray = [
  [0, 0.5, 0.0],
  [0.5, 0.5, 0.0],
  [0.5, 0, 0.0],
  [0, 0, 0.0],
];
const color: areaArray = [
  [1.0, 0.0, 0.0, 1.0],
  [0.0, 1.0, 0.0, 1.0],
  [0.0, 0.0, 1.0, 1.0],
  [1.0, 0.0, 0.0, 1.0],
];
const textureCoord: areaArray = [
  [0.0, 1.0],
  [1.0, 1.0],
  [1.0, 0.0],
  [0.0, 0.0],
];
const index: areaArray = [
  [0, 1, 2],
  [0, 2, 3],
];
export const planeData = {
  position,
  color,
  textureCoord,
  index,
};
interface areaArray {
  [x: string]: any;
  [index: number]: pointArray;
}
export const getFloat32Array = (data: areaArray[]) => {
  const mat: number[] = [];
  data.forEach((val: areaArray) => {
    val.forEach((val1: pointArray) => {
      val1.forEach((val2: number) => {
        mat.push(val2);
      });
      // i += 1;
      // switch (i) {
      //   case 1:
      //     mat.push(0.0);
      //     mat.push(0.0);
      //     break;
      //   case 2:
      //     mat.push(1.0);
      //     mat.push(0.0);
      //     break;
      //   case 3:
      //     mat.push(1.0);
      //     mat.push(1.0);
      //     break;
      //   case 4:
      //     mat.push(0.0);
      //     mat.push(1.0);
      //     break;
      // }
      // if (i === 4) {
      //   i = 0;
      // }
    });
  });
  return new Float32Array(mat);
};
export const getInt16Array = (data: areaArray[]) => {
  const mat: number[] = [];
  data.forEach((val: areaArray) => {
    val.forEach((val1: pointArray) => {
      val1.forEach((val2: number) => {
        mat.push(val2);
      });
    });
  });
  return new Int16Array(mat);
};
export const initTexture = (
  gl: WebGLRenderingContext,
  imageSrc: string
): Promise<WebGLTexture> => {
  const texture = gl.createTexture();
  const image: HTMLImageElement = new Image();
  image.src = imageSrc;
  image.crossOrigin = "anonymous";
  return new Promise((resolve) => {
    image.onload = () => {
      //对纹理图像进行y轴翻转
      gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
      //
      gl.bindTexture(gl.TEXTURE_2D, texture);
      //设置纹理贴图填充方式(纹理贴图像素尺寸小于顶点绘制区域像素尺寸)
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      //设置纹理贴图填充方式(纹理贴图像素尺寸大于顶点绘制区域像素尺寸)
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      // 水平填充
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
      //竖直填充
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
      gl.texImage2D(
        gl.TEXTURE_2D,
        0,
        gl.RGBA,
        gl.RGBA,
        gl.UNSIGNED_BYTE,
        image
      );
      gl.bindTexture(gl.TEXTURE_2D, null);
      resolve(texture);
    };
  });
};
export const createDynamicTexture = (
  gl: WebGLRenderingContext,
  width: number,
  height: number
) => {
  const texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(
    gl.TEXTURE_2D,
    0,
    gl.RGBA,
    width,
    height,
    0,
    gl.RGBA,
    gl.UNSIGNED_BYTE,
    null
  );
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
  //设置纹理贴图填充方式(纹理贴图像素尺寸大于顶点绘制区域像素尺寸)
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  // 水平填充
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
  //竖直填充
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
  gl.bindTexture(gl.TEXTURE_2D, null);

  return texture;
};
function createFBO(gl: WebGL2RenderingContext, width: number, height: number) {
  const obj = gl.createFramebuffer(); //创建fbo对象 frame buffer object
  gl.bindFramebuffer(gl.FRAMEBUFFER, obj); //指定该对象为freame buffer
  //深度缓冲区
  const depthObj = gl.createRenderbuffer(); //创建深度缓冲区
  gl.bindRenderbuffer(gl.RENDERBUFFER, depthObj); //绑定renderBuffer
  //存储深度值每一位16bit-2字节
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);
  //把深度缓冲区绑定到renderbuffer上
  gl.framebufferRenderbuffer(
    gl.FRAMEBUFFER,
    gl.DEPTH_ATTACHMENT,
    gl.RENDERBUFFER,
    depthObj
  );
  const textureDynamic = createDynamicTexture(gl, width, height);
  //绑定到颜色缓冲区
  gl.framebufferTexture2D(
    gl.FRAMEBUFFER,
    gl.COLOR_ATTACHMENT0,
    gl.TEXTURE_2D,
    textureDynamic,
    0
  );
  //清空缓冲区清理为原始状态恢复状态机
  gl.bindRenderbuffer(gl.RENDERBUFFER, null);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.bindTexture(gl.TEXTURE_2D, null);
  return obj;
}
